<template>
  <div>
    <div class="share-lyric-page" v-if="!sharePhotoShow">
      <div class="share-lyric-header">
        <div class="close-btn" @click="close">
          <svg
            t="1722560409746"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="6750"
            width="24"
            height="24"
          >
            <path
              d="M230.8608 544l198.8096 198.8096a32 32 0 0 1-45.2608 45.2608l-249.856-249.856a37.12 37.12 0 0 1 0-52.48l249.856-249.8048a32 32 0 0 1 45.2608 45.2608L230.8608 480H870.4a32 32 0 1 1 0 64H230.8608z"
              fill="#ffffff"
              p-id="6751"
            ></path>
          </svg>
          <div>歌词分享</div>
        </div>
      </div>
      <div class="share-lyric-body">
        <div class="lyric-item"></div>
        <div class="lyric-item"></div>
        <div class="lyric-item"></div>
        <div
          class="lyric-item"
          @click="handleClickItem(index)"
          :class="{ select: selectIndexs.includes(index) }"
          v-for="(item, index) in lyricArr"
          :key="index"
        >
          <svg
            t="1722328777343"
            v-if="selectIndexs.includes(index)"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="4251"
            width="16"
            height="16"
          >
            <path
              d="M997.888 70.144C686.592 261.12 460.8 502.272 358.912 623.104l-248.832-195.072-110.08 88.576 429.568 437.248c73.728-189.44 308.224-559.616 594.432-822.784l-26.112-60.928m0 0z"
              p-id="4252"
              fill="#ffffff"
            ></path>
          </svg>
          {{ item }}
        </div>
        <div class="lyric-item"></div>
        <div class="lyric-item"></div>
        <div class="lyric-item"></div>
      </div>
      <div class="share-lyric-bottom">
        <div class="share-btn" @click="handleClickCopyShare">复制歌词</div>
        <div class="share-btn" @click="handleClickPhotShare">分享歌词</div>
      </div>
    </div>
    <PosterLyric
      v-if="sharePhotoShow"
      @close="handlePosterClose"
      :title="title"
      :lyric="selectLyric"
      :qrcodeUrl="qrcodeUrl"
    />
  </div>
</template>
<script>
import PosterLyric from "./PosterLyric.vue";
import { copyText } from "@/utils/utils";
export default {
  name: "ShareLyric",
  components: { PosterLyric },
  props: {
    lyric: {
      type: String,
      default: "",
    },
    title: {
      type: String,
      default: "",
    },
    qrcodeUrl: {
      type: String,
      default: "https://star.top237.top",
    },
  },
  data() {
    return {
      //
      selectIndexs: [],
      sharePhotoShow: false,
    };
  },
  computed: {
    lyricArr() {
      return this.lyric.split("\n");
    },
    selectLyric() {
      return this.lyricArr
        .filter((item, index) => {
          return this.selectIndexs.includes(index);
        })
        .join("\n");
    },
  },
  mounted() {},
  methods: {
    handleClickItem(index) {
      if (this.selectIndexs.includes(index)) {
        this.selectIndexs = this.selectIndexs.filter((item) => item != index);
        return;
      }
      this.selectIndexs = [...this.selectIndexs, index];
    },
    handleClickPhotShare() {
      if (!this.selectLyric) {
        this.$toast.error({
          content: "请选择歌词",
        });
        return;
      }
      this.sharePhotoShow = true;
    },
    handlePosterClose() {
      this.sharePhotoShow = false;
    },
    close() {
      this.$emit("close");
    },
    handleClickCopyShare() {
      if (!this.selectLyric) {
        this.$toast.error({
          content: "请选择歌词",
        });
        return;
      }
      copyText(this.selectLyric);
      this.$toast.success("复制成功");
    },
  },
};
</script>
<style scoped>
.share-lyric-page {
  width: 100%;
  height: 100vh;
  background-image: linear-gradient(#362e2b 0%, #000000 100%);
  color: #ffffff;
  position: relative;
  overflow: hidden;
}

.share-lyric-header {
  top: 0px;
  left: 0px;
  position: fixed;
  width: 100%;
  height: 46px;
  background-image: linear-gradient(#362e2b 0%, #362e2b 30%, #362e2b00 100%);
  display: flex;
  justify-content: start;
  align-items: center;
  padding: 0 20px;
  padding-inline: 24px;
  z-index: 10;
}
.close-btn {
  display: flex;
  align-items: center;
  column-gap: 12px;
}
.share-lyric-body {
  width: 100%;
  height: 100%;
  overflow: auto;
}

.share-lyric-bottom {
  bottom: 0px;
  left: 0px;
  position: fixed;
  width: 100%;
  height: 86px;
  background-image: linear-gradient(rgba(0, 0, 0, 0) 0%, #000000 30%, #000000 100%);
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.lyric-item {
  text-align: center;
  line-height: 30px;
  padding-inline: 30px;
  padding-block: 10px;
  color: #8f8c85;
}

.share-btn {
  padding-inline: 20px;
  padding-block: 6px;
  border-radius: 30px;
  border: 1px solid #625f58;
  margin-top: 26px;
}

.lyric-item.select {
  background-color: #000000;
  position: relative;
}

.select .icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
}
</style>
